<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<script type="text/javascript">

/* Copyright (C) 2007 Richard Atterer, richardÂ©atterer.net
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License, version 2. See the file
   COPYING for details. */

var imageNr = 0; // Serial number of current image
var finished = new Array(); // References to img objects which have finished downloading
var paused = false;

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "http://192.168.0.105:8080/?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

// Two layers are always present (except at the very beginning), to avoid flicker
function imageOnload() {
  this.style.zIndex = imageNr; // Image finished, bring to front!
  while (1 < finished.length) {
    var del = finished.shift(); // Delete old image(s) from document
    del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}

function imageOnclick() { // Clicking on the image will pause the stream
  paused = !paused;
  if (!paused) createImageLayer();
}

</script>

<body onload="createImageLayer();">

<div id="container">

  <h3>Security System</h3>

  <div class='row voffset50'>

    <div class='col-md-4'></div>
    <div class='col-md-4 text-center'>
      Alarm is OFF
    </div>
    <div class='col-md-4'></div>

  </div>

  <div class='row'>

    <div class='col-md-4'></div>
    <div class='col-md-4'>
      <button id='off' class='btn btn-block btn-danger'>Deactivate Alarm</button>
    </div>
    <div class='col-md-4'></div>

  </div>

  <div class='row voffset50'>
    <div class='col-md-3'></div>
    <div class='col-md-7'>
      <div id="webcam">
        <noscript>
          <img src="http://192.168.0.105:8080/?action=snapshot" />
        </noscript>
      </div>
    </div>
    <!-- <div class='col-md-2'></div> -->
  </div>

  <!-- <div class='row'>

    <div class='col-md-4'></div>
    <div class='col-md-4'>
      Current consumption: <span id='current'></span> A
    </div>
    <div class='col-md-4'></div>

  </div>

  <div class='row'>

    <div class='col-md-4'></div>
    <div class='col-md-4'>
      Power consumption: <span id='power'></span> W
    </div>
    <div class='col-md-4'></div>

  </div> -->

</div>

</body>
</html>
